<template>
  <div class="buddy">
    <div class="buddy_main">
      <div class='list flex' v-for="item in list" @click="toPartner(item.uuid,item.name)" v-if="item.id">
        <div class='list_l'>
          <img class='list_l_img' :src='item.imgs' alt=''>
          <div class='list_l_star'>
            <i v-bind:class="[item.score>0?'iconfont star icon-star':'iconfont star icon-star5']"></i>
            <i v-bind:class="[item.score>1?'iconfont star icon-star':'iconfont star icon-star5']"></i>
            <i v-bind:class="[item.score>2?'iconfont star icon-star':'iconfont star icon-star5']"></i>
            <i v-bind:class="[item.score>3?'iconfont star icon-star':'iconfont star icon-star5']"></i>
            <i v-bind:class="[item.score>4?'iconfont star icon-star':'iconfont star icon-star5']"></i>
          </div>
        </div>

        <div class='list_m'>
          <div class='list_m_top flex first_center'>
            <div class='list_m_name'>{{item.name}}</div>
            <div class='list_m_score'>{{item.score}}分</div>
          </div>
          <div class='list_m_state'>未完成订单数量：{{item.unfinished_num}}</div>
          <div class='flex first_center'>
            <div class='list_m_serve'>服务:{{item.service_num}}次</div>
            <div class='list_m_review'>点评:{{item.review_num}}</div>
          </div>
        </div>

        <div class='list_r'>
          <button  v-if="item.status == 1" class='list_r_btn' @click.stop="toConfirm(item.uid,item.name,item.mobile)">预约</button>
        </div>

      </div>
    </div>
    <div class="buddy_alert_out" v-if="show == true" @click="close"></div>
    <div class="buddy_alert" v-if="show == true">
      <p class="buddy_alert_tit">请选择本次清洗部分！</p>
      <div class="flex buddy_btn">
        <button @click.stop="chooseWash(1)">外观清洗</button>
        <button @click.stop="chooseWash(2)">内外清洗</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: "buddy",
  data () {
    return {
      list: [],
      show: false,
      workerUid: '0',
    }
  },
  mounted(){
    this.getInfo();
    this.$root.share();
  },
  methods: {
    // 获取信息
    getInfo(){
      var that = this;
      axios.all([
        axios.get(global.api.index.search,{
          params: {
            uuid: localStorage.getItem('carWashUuid'),
            soft: '2',
            // key: 0,
          }
        }),
        axios.get(global.api.carMine.car,{  //车子数量
          params: {
            uuid: localStorage.getItem('carWashUuid'),
          }
        }),
        axios.get(global.api.address.myAddress,{  //地址数量
          params: {
            uuid: localStorage.getItem('carWashUuid'),
          }
        }),
      ])
      .then(axios.spread(function(info,car,addr){
        if (info.data.code == 0) {
          that.list = info.data.data
        }
        
        for (var i=0;i<car.data.data.length;i++) {

          if (car.data.data[i].is_default == 1) {
            global.order.car.id = car.data.data[i].id;
            that.carId = car.data.data[i].id;
            sessionStorage.setItem('carId', car.data.data[i].id);
          }

        }

        for (var j=0;j<addr.data.data.length;j++) {

          if (addr.data.data[j].is_default == 1) {
            global.order.addr.id = addr.data.data[j].id;
            that.addrId = addr.data.data[j].id;
            sessionStorage.setItem('addrId', addr.data.data[j].id);
          }

        }
      }))
      // .then(function(res){
      //   console.log("getInfo then");
      //   console.log(res.data);
      //   if (res.data.code == 0) {
      //     that.list = res.data.data
      //   } 
      // })
      .catch(function(res){
        console.log("getInfo catch");
        console.log(res);
      })
    },
    // 预约
    toConfirm(id,name,phone){
      this.workerUid = id;
      // global.order.worker.id = id;
      // global.order.worker.name = name;
      // global.order.worker.phone = phone;
      global.order.first = true;
      // this.$router.push({path:'Confirm'})
      this.show = true;
    },
    chooseWash(index){
      // global.order.service = index;
      this.show = false;
      var wid = this.workerUid;
      // this.$router.push({path:'Confirm'})
      location.href='/#/Confirm?wid='+wid+'&service='+index;
      // location.href='http://localhost:8080/#/Confirm?wid='+wid+'&service='+index;
    },
    close(){
      this.show = false;
    },
    // 查看小伙伴详情
    toPartner(uuid,key){
      this.$router.push({
        name:'Partner',
        params: {
          uuid: uuid,
          key: key,
        }
      })
    },
  },
}
</script>
  
<style scoped>
  button:focus{
    outline-offset: 0px;
    outline: -webkit-focus-ring-color auto 0px;
  }
  .buddy{
    position: relative;
  }
  /* 列表 */
  .list{
    padding: 0.5rem;
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
    justify-content: flex-start;
    align-items: flex-end;
  }
  .list_l{
    width: 23%;
  }
  .list_l_img{
    width: 55%;
    border-radius: 50%;
  }
  .list_l_star{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .star{
    color: #2ecc80;
    font-size: 0.8rem;
  }
  .list_m{
    width: 55%;
  }
  .list_m_top{
    font-weight: bold;
  }
  .list_m_name{
    margin-right: 1rem;
  }
  .list_m_score{

  }
  .list_m_state{
    text-align: left;
    font-size: 0.9rem;
    padding: 0.3rem 0;
    color: #595757;
  }
  .list_m_serve{
    font-size: 0.8rem;
    color: #888888;
    margin-right: 0.5rem;
  }
  .list_m_review{
    font-size: 0.8rem;
    color: #888888;
  }
  .list_r{
    width: 22%;
  }
  .list_r_btn{
    margin: 0 0 0.75rem 0;
    padding: 0;
    width: 4rem;
    height: 2.5rem;
    background-color: #2ecc80;
    color: #ffffff;
    font-size: 0.9rem;
    border-radius: 0.5rem;
    border: none;
  }
  .buddy_alert_out{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.3);
    z-index: 100;
  }
  .buddy_alert {
    width: 90%;
    position: fixed;
    top: 50%;
    left: 5%;
    margin-top: -5rem;
    z-index: 101;
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1rem 0;
  }
  .buddy_alert_tit{
    font-size: 1rem;
    line-height: 2rem;
    padding-bottom: 1rem;
  }
  .buddy_btn{
    justify-content: space-around;
    align-items: center;
  }
  .buddy_btn button{
    width: 45%;
    height: 2rem;
    line-height: 2rem;
    border: none;
    background-color: #2ecc80;
    color: #fff;
    font-size: 1rem;
    border-radius: 0.5rem;
  }
</style> 
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
</style>